<template>
  <div
    class="rounded-full text-center text-white flex-center border !inline-flex"
    :style="{
      width: `${props.size}px`,
      height: `${props.size}px`,
      borderColor: props.borderColor,
      backgroundColor: props.bgColor,
      color: props.textColor,
      fontSize: props.fontSize
    }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  size: {
    type: Number,
    default: 20
  },
  fontSize: {
    type: String,
    default: '11px'
  },
  bgColor: {
    type: String,
    default: 'var(--primary-color)'
  },
  textColor: {
    type: String,
    default: '#ffffff'
  },
  borderColor: {
    type: String,
    default: 'transparent'
  }
})
</script>
